<template>
  <div class="chat-card">
    <h2 class="text-center mb-4">透策留言板</h2>
    <div
      class="loading-box"
      v-if="loading"
      v-loading="loading"
      element-loading-text="正在加载留言记录......"
    ></div>
    <div class="msg-box" v-else-if="msgList.length">
      <div class="msg-list" ref="msgListEl">
        <div
          class="msg-item"
          :class="item.type == 2 ? 'left-msg' : 'right-msg'"
          v-for="item in msgList"
          :key="item"
        >
          <div class="logo" v-if="item.type == 2">客服</div>
          <div class="msg-content">{{ item.content }}</div>
          <div class="logo" v-if="item.type == 1">我</div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无留言记录" />
    <div class="reply-box">
      <el-input
        v-model="replyMsg"
        :autosize="{ minRows: 1, maxRows: 4 }"
        maxlength="666"
        placeholder="说点什么吧......."
        type="textarea"
        @keydown.enter="(e) => sendMsg(msgListEl, e)"
      />
      <div
        class="send-btn"
        :class="replyMsg.length ? 'active-btn' : ''"
        @click="sendMsg(msgListEl)"
      >
        <el-icon v-loading="sendLoading"><Promotion /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onActivated } from "vue";
import { Promotion } from "@element-plus/icons-vue";
import { useChatCardHook } from "./hook";

const msgListEl = ref();

onMounted(() => {
  setTimeout(() => {
    nextTick(() => {
      if (msgListEl.value.scrollHeight >= msgListEl.value.clientHeight) {
        //设置滚动条到最底部
        msgListEl.value.scrollTop = msgListEl.value.scrollHeight;
      }
    });
  }, 500);
});

const { replyMsg, msgList, sendMsg, loading, sendLoading } = useChatCardHook();
</script>

<style scoped lang="postcss">
.chat-card {
  @apply p-6;
  .msg-box {
    @apply bg-gray-100 mb-5 rounded-md p-2;
    .msg-list {
      @apply flex-wrap align-baseline overflow-y-auto items-start;
      max-height: 500px;
      min-height: 500px;
      &::-webkit-scrollbar {
        width: 5px;
        /* background: #ccc; */
      }
      .msg-item {
        @apply w-full my-2 flex;
        .msg-content {
          @apply text-white px-3 py-2 rounded-md;
          max-width: 60%;
          word-break: break-all;
        }
        .logo {
          @apply w-8 h-8 rounded-md flex justify-center items-center text-white;
        }
      }
      .left-msg {
        @apply flex justify-start;
        .logo {
          @apply bg-theme-color mr-2;
        }
        .msg-content {
          @apply bg-white text-black;
        }
      }
      .right-msg {
        @apply flex justify-end;
        .logo {
          @apply bg-yellow-400 ml-2;
        }
        .msg-content {
          @apply text-white bg-green-400;
        }
      }
    }
  }
  .reply-box {
    @apply mx-auto relative;
    width: 70%;
    :deep(.el-textarea__inner) {
      min-height: 41px;
      height: 41px;
      padding: 10px 30px 10px 10px;
    }
    .send-btn {
      @apply bg-transparent text-gray-200 text-xl absolute right-3 rounded-md p-1 flex justify-center items-center;
      bottom: 6px;
    }
    .active-btn {
      @apply bg-theme-color text-white;
    }
  }
  .loading-box {
    @apply bg-gray-100 mb-5 rounded-md p-2;
    height: 500px;
  }
  :deep(.el-loading-spinner) {
    font-size: 30px;
  }
}
</style>
